 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS常用属性</title>
    <style>
        h1{
            font: bolder 50px kaiti, sans-serif;
        }
        p{
            line-height: 35px;
        }
        .block{
            font: 20px/30px kaiti, sans-serif;
            color: blue;
            background-color: rgb(221, 152, 152);
            padding: 10px;
            border: 2px solid black;
            margin-top: 20px;
            width: 300px;
            height: 200px;
        }
        .inline{
            font: italic 18px/25px kaiti, sans-serif;
            color: green;
            background-color: rgb(152, 221, 152);
            padding: 5px;
            border: 1px solid black;
            margin-top: 10px;
            
        }
        .inline-block{
            font: normal 16px/20px kaiti, sans-serif;
            color: red;
            background-color: rgb(152, 152, 221);
            padding: 5px;
            border: 1px solid black;
            margin-top: 10px;
            height: 200px;
            width: 300px;
        }
        div.div-inline{
            display: inline;
            font: normal 16px/20px kaiti, sans-serif;
            color: purple;
            background-color: rgb(221, 221, 152);
            padding: 5px;
            border: 1px solid black;
            height: 500px;
            width: 400px;
        }
        span.span-inline-block{
            display: inline-block;
            font: normal 16px/20px kaiti, sans-serif;
            color: rgb(43, 39, 32);
            background-color: rgb(152, 221, 221);
            padding: 5px;
            border: 1px solid black;
            height: 200px;
            width: 2000px;
        }
    </style>
</head>
 <body>
    <h1>这是一个font复合属性示例</h1>
    <p>这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本</p>
    <div class="block">这是一个块级元素</div>
    <span class="inline">这是一个行内元素</span>
    <img src="4D.jpg" alt="嘿嘿嘿嘿" class="inline-block">
    <img src="4D.jpg" alt="嘿嘿嘿嘿" class="inline-block">
    <img src="4D.jpg" alt="嘿嘿嘿嘿" class="inline-block">
    <h2>display</h2>
    <div class="div-inline">这是一个转换为行内元素的div标签</div>
    <br>
    <span class="span-inline-block">这是一个转换为行内块元素的行内元素</span>
</body>
 </html>